<template>
  <div class="cenBox">
    <!-- banner图 -->
    <CarouselStyle />
    <!-- 搜索 -->
    <SearchStyle />
    <!-- 栅格 -->
    <div class="context">
      <el-row :gutter="20">
        <el-col :span="20" class="col-lef">
          <!-- 等级组件 -->
          <LevelContext :levelDate="levelDate" @triggerLevel="triggerLevel" />
          <!-- 地区组件 -->
          <RegionContext
            :regionDate="regionDate"
            @triggerRegion="triggerRegion"
          />
          <!-- 展示医院的结构 -->
          <div class="hospital">
            <el-row v-if="hospitalData.length > 0">
              <el-col
                :span="12"
                style="margin-top: 10px; margin-bottom: 10px"
                v-for="item in hospitalData"
                :key="item.id"
              >
                <el-card
                  shadow="hover"
                  style="height: 90px; width: 476px"
                  @click="goDetail(item.hoscode)"
                >
                  <div class="hospital-into">
                    <div class="lef">
                      <p>{{ item.hosname }}</p>
                      <div class="lef-info">
                        <div>
                          <el-icon><Pointer /></el-icon>
                          <span>{{ item.param.hostypeString }}</span>
                        </div>
                        <div>
                          <el-icon><Timer /></el-icon>
                          <span>{{
                            `每天${item.bookingRule.releaseTime}放号`
                          }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="rig">
                      <img :src="`data:image/jpeg;base64,${item.logoData}`" />
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <!-- 分页器 -->
          <div class="demo-pagination-block">
            <el-pagination
              v-model:current-page="pageNo"
              v-model:page-size="pageSize"
              background
              :page-sizes="[5, 10, 15, 17]"
              layout="prev, pager, next, jumper, ->, sizes , total"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <!-- 医院常见信息 -->
          <HospitalDetails />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import CarouselStyle from "@/view/HomePage/components/CarouselStyle";
import SearchStyle from "@/view/HomePage/components/SearchStyle";
import LevelContext from "@/view/HomePage/components/LevelContext";
import RegionContext from "@/view/HomePage/components/RegionContext";
import HospitalDetails from "@/view/HomePage/components/HospitalDetails";
import { reqHospital, reqHospitalLevelAndRegion } from "@/api/HomePage";
export default {
  name: "HomePage",
  components: {
    CarouselStyle,
    SearchStyle,
    LevelContext,
    RegionContext,
    HospitalDetails,
  },
  data() {
    return {
      pageNo: 1,
      pageSize: 5,
      total: 0,
      hospitalData: [],
      levelDate: [],
      regionDate: [],
      districtCode: "",
      hostype: "",
    };
  },
  methods: {
    async getHospitalInfo() {
      let result = await reqHospital(
        this.pageNo,
        this.pageSize,
        this.hostype,
        this.districtCode
      );
      if (result.code === 200) {
        this.hospitalData = result.data.content;
        this.total = result.data.totalElements;
      }
    },
    handleSizeChange() {
      this.pageNo = 1;
      this.getHospitalInfo();
    },
    handleCurrentChange() {
      this.getHospitalInfo();
    },
    // Level等级
    async getHospitalLevel() {
      let result = await reqHospitalLevelAndRegion("HosType");
      if (result.code === 200) {
        this.levelDate = result.data;
      }
    },
    // Region地区
    async getHospitalRegion() {
      let result = await reqHospitalLevelAndRegion("Beijin");
      if (result.code === 200) {
        this.regionDate = result.data;
      }
    },
    triggerRegion(val) {
      if (val) {
        this.districtCode = val;
        this.getHospitalInfo();
      } else {
        this.districtCode = "";
        this.getHospitalInfo();
      }
    },
    triggerLevel(val) {
      if (val) {
        this.hostype = val;
        this.getHospitalInfo();
      } else {
        this.hostype = "";
        this.getHospitalInfo();
      }
    },
    goDetail(val) {
      this.$router.push({ path: "/hospital", query: { hoscode: val } });
    },
  },
  created() {
    this.getHospitalInfo();
    this.getHospitalLevel();
    this.getHospitalRegion();
  },
};
</script>
<style lang="scss" scoped>
.cenBox {
  width: 100%;
  overflow: hidden;
  .col-lef {
    position: relative;
    padding-bottom: 50px;
    margin-bottom: 20px;
    overflow: hidden;
    .demo-pagination-block {
      position: absolute;
      bottom: 0;
      width: 95%;
    }
  }
  .hospital {
    .hospital-into {
      display: flex;
      justify-content: space-between;
      .lef {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .lef-info {
          display: flex;
          justify-content: space-between;
          width: 280px;
          color: #7f7f7f;
          span {
            margin-left: 10px;
          }
        }
      }
      .rig {
        width: 50px;
        height: 50px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
